<template>
  <div>
    <div class="card">
      <!-- 本场比分 -->
      <el-row
        align="middle"
        type="flex"
        class="row-bg"
        justify="space-between"
        style="margin: 10px 5px"
      >
        <el-col :span="4"
          ><div class="team">{{ team1.team }}</div></el-col
        >
        <el-col :span="4"
          ><div
            class="score"
            :class="{ lose: team1.totalScore < team2.totalScore }"
          >
            {{ team1.totalScore }}
          </div></el-col
        >
        <el-col :span="8">
          <el-select v-model="currentDate" placeholder="比赛日期">
            <el-option
              v-for="item in dates"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option> </el-select
        ></el-col>
        <el-col :span="4"
          ><div
            class="score"
            :class="{ lose: team2.totalScore < team1.totalScore }"
          >
            {{ team2.totalScore }}
          </div></el-col
        >
        <el-col :span="4"
          ><div class="team">{{ team2.team }}</div></el-col
        >
      </el-row>
    </div>

    <!-- 本场数据帝 -->
    <div class="card">
      <div class="title">本场数据帝</div>
      <el-row
        align="middle"
        type="flex"
        class="row-bg best-row"
        justify="space-between"
        v-if="team1.maxScorePlayer"
      >
        <el-col :span="7" class="left-player">{{
          team1.maxScorePlayer.player
        }}</el-col>
        <el-col :span="3">{{ team1.maxScorePlayer.score }}</el-col>
        <el-col :span="4">得分</el-col>
        <el-col :span="3">{{ team2.maxScorePlayer.score }}</el-col>
        <el-col :span="7" class="right-player">{{
          team2.maxScorePlayer.player
        }}</el-col>
      </el-row>
      <el-row
        align="middle"
        type="flex"
        class="row-bg best-row"
        justify="space-between"
        v-if="team1.maxReboundPlayer"
      >
        <el-col :span="7" class="left-player">{{
          team1.maxReboundPlayer.player
        }}</el-col>
        <el-col :span="3">{{ team1.maxReboundPlayer.rebounds }}</el-col>
        <el-col :span="4">篮板</el-col>
        <el-col :span="3">{{ team2.maxReboundPlayer.rebounds }}</el-col>
        <el-col :span="7" class="right-player">{{
          team2.maxReboundPlayer.player
        }}</el-col>
      </el-row>
      <el-row
        align="middle"
        type="flex"
        class="row-bg best-row"
        justify="space-between"
        v-if="team1.maxAssistPlayer"
      >
        <el-col :span="7" class="left-player">{{
          team1.maxAssistPlayer.player
        }}</el-col>
        <el-col :span="3">{{ team1.maxAssistPlayer.assists }}</el-col>
        <el-col :span="4">助攻</el-col>
        <el-col :span="3">{{ team2.maxAssistPlayer.assists }}</el-col>
        <el-col :span="7" class="right-player">{{
          team2.maxAssistPlayer.player
        }}</el-col>
      </el-row>
      <el-row
        align="middle"
        type="flex"
        class="row-bg best-row"
        justify="space-between"
        v-if="team1.maxStealPlayer"
      >
        <el-col :span="7" class="left-player">{{
          team1.maxStealPlayer.player
        }}</el-col>
        <el-col :span="3">{{ team1.maxStealPlayer.steals }}</el-col>
        <el-col :span="4">抢断</el-col>
        <el-col :span="3">{{ team2.maxStealPlayer.steals }}</el-col>
        <el-col :span="7" class="right-player">{{
          team2.maxStealPlayer.player
        }}</el-col>
      </el-row>
      <el-row
        align="middle"
        type="flex"
        class="row-bg best-row"
        justify="space-between"
        v-if="team1.maxBlockPlayer"
      >
        <el-col :span="7" class="left-player">{{
          team1.maxBlockPlayer.player
        }}</el-col>
        <el-col :span="3">{{ team1.maxBlockPlayer.blocks }}</el-col>
        <el-col :span="4">盖帽</el-col>
        <el-col :span="3">{{ team2.maxBlockPlayer.blocks }}</el-col>
        <el-col :span="7" class="right-player">{{
          team2.maxBlockPlayer.player
        }}</el-col>
      </el-row>
      <el-row
        align="middle"
        type="flex"
        class="row-bg best-row"
        justify="space-between"
        v-if="team1.maxThreePointerPlayer"
      >
        <el-col :span="7" class="left-player">{{
          team1.maxThreePointerPlayer.player
        }}</el-col>
        <el-col :span="3">{{ team1.maxThreePointerPlayer.threeHits }}</el-col>
        <el-col :span="4">三分命中</el-col>
        <el-col :span="3">{{ team2.maxThreePointerPlayer.threeHits }}</el-col>
        <el-col :span="7" class="right-player">{{
          team2.maxThreePointerPlayer.player
        }}</el-col>
      </el-row>
      <!-- <el-button
        type="text"
        :icon="isExpendedBestPalyer ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
        size="mini"
        class="expender-btn"
        @click="isExpendedBestPalyer = !isExpendedBestPalyer"
        >{{ isExpendedBestPalyer ? "收起" : "展开更多" }}</el-button
      > -->
    </div>

    <!-- 球员统计 -->
    <div class="card">
      <div class="title">球员统计</div>
      <!-- 1#队伍 -->
      <el-table
        stripe
        :data="team1.data"
        :header-cell-style="headStyle"
        style="width: 100%; margin-top: 10px"
        size="mini"
      >
        <el-table-column
          fixed
          prop="player"
          :label="team1.team"
        ></el-table-column>
        <el-table-column width="50px" prop="score" label="得分">
        </el-table-column>
        <el-table-column width="50px" prop="rebounds" label="篮板">
        </el-table-column>
        <el-table-column width="50px" prop="assists" label="助攻">
        </el-table-column>
        <el-table-column width="60px" prop="totalPointer" label="投篮">
        </el-table-column>
        <el-table-column width="50px" prop="threeHits" label="三分">
        </el-table-column>
        <el-table-column width="70px" prop="efg" label="eFG%">
        </el-table-column>
        <el-table-column width="50px" prop="steals" label="抢断">
        </el-table-column>
        <el-table-column width="50px" prop="turnovers" label="失误">
        </el-table-column>
        <el-table-column width="50px" prop="blocks" label="盖帽">
        </el-table-column>
        <el-table-column width="50px" prop="fouls" label="犯规">
        </el-table-column>
      </el-table>

      <!-- 2#队伍 -->
      <el-table
        :data="team2.data"
        :header-cell-style="headStyle"
        stripe
        style="width: 100%; margin-top: 20px"
        size="mini"
      >
        <el-table-column fixed prop="player" :label="team2.team">
        </el-table-column>
        <el-table-column width="50px" prop="score" label="得分">
        </el-table-column>
        <el-table-column width="50px" prop="rebounds" label="篮板">
        </el-table-column>
        <el-table-column width="50px" prop="assists" label="助攻">
        </el-table-column>
        <el-table-column width="60px" prop="totalPointer" label="投篮">
        </el-table-column>
        <el-table-column width="50px" prop="threeHits" label="三分">
        </el-table-column>
        <el-table-column width="70px" prop="efg" label="eFG%">
        </el-table-column>
        <el-table-column width="50px" prop="steals" label="抢断">
        </el-table-column>
        <el-table-column width="50px" prop="turnovers" label="失误">
        </el-table-column>
        <el-table-column width="50px" prop="blocks" label="盖帽">
        </el-table-column>
        <el-table-column width="50px" prop="fouls" label="犯规">
        </el-table-column>
      </el-table>
    </div>

    <!-- 球队统计 -->
    <div class="card" v-if="total1">
      <div class="title">球队统计</div>
      <el-row
        align="middle"
        type="flex"
        class="row-bg best-row"
        justify="space-between"
      >
        <el-col :span="4"
          ><div class="team1">{{ team1.team }}</div></el-col
        >
        <el-col :span="4"
          ><div class="team2">{{ team2.team }}</div></el-col
        >
      </el-row>

      <!-- 得分 -->
      <el-row type="flex" class="row-bg best-row" justify="space-between">
        <el-col :span="2">{{ total1.score }}</el-col>
        <el-col :span="4">得分</el-col>
        <el-col :span="2">{{ total2.score }}</el-col>
      </el-row>
      <el-row class="margin-bottom-15">
        <el-col :span="12"
          ><el-progress
            class="mirrorRotateLevel"
            :percentage="(total1.score / 150) * 100"
            :show-text="false"
            :stroke-width="6"
            :color="total1.score > total2.score ? color1 : loseColor"
          ></el-progress
        ></el-col>
        <el-col :span="12"
          ><el-progress
            :percentage="(total2.score / 150) * 100"
            :show-text="false"
            :stroke-width="6"
            :color="total2.score > total1.score ? color2 : loseColor"
          ></el-progress
        ></el-col>
      </el-row>

      <!-- 篮板 -->
      <el-row type="flex" class="row-bg best-row" justify="space-between">
        <el-col :span="2">{{ total1.rebounds }}</el-col>
        <el-col :span="4">篮板</el-col>
        <el-col :span="2">{{ total2.rebounds }}</el-col>
      </el-row>
      <el-row class="margin-bottom-15">
        <el-col :span="12"
          ><el-progress
            class="mirrorRotateLevel"
            :percentage="(total1.rebounds / 180) * 100"
            :show-text="false"
            :stroke-width="6"
            :color="total1.rebounds > total2.rebounds ? color1 : loseColor"
          ></el-progress
        ></el-col>
        <el-col :span="12"
          ><el-progress
            :percentage="(total2.rebounds / 180) * 100"
            :show-text="false"
            :stroke-width="6"
            :color="total2.rebounds > total1.rebounds ? color2 : loseColor"
          ></el-progress
        ></el-col>
      </el-row>

      <!-- 助攻 -->
      <el-row type="flex" class="row-bg best-row" justify="space-between">
        <el-col :span="2">{{ total1.assists }}</el-col>
        <el-col :span="4">助攻</el-col>
        <el-col :span="2">{{ total2.assists }}</el-col>
      </el-row>
      <el-row class="margin-bottom-15">
        <el-col :span="12"
          ><el-progress
            class="mirrorRotateLevel"
            :percentage="(total1.assists / 50) * 100"
            :show-text="false"
            :stroke-width="6"
            :color="total1.assists > total2.assists ? color1 : loseColor"
          ></el-progress
        ></el-col>
        <el-col :span="12"
          ><el-progress
            :percentage="(total2.assists / 50) * 100"
            :show-text="false"
            :stroke-width="6"
            :color="total2.assists > total1.assists ? color2 : loseColor"
          ></el-progress
        ></el-col>
      </el-row>

      <!-- 命中率 -->
      <el-row type="flex" class="row-bg best-row" justify="space-between">
        <el-col :span="6">{{
          ((total1.hits / total1.shots) * 100).toFixed(2) +
          "%(" +
          total1.totalPointer +
          ")"
        }}</el-col>
        <el-col :span="4">命中率</el-col>
        <el-col :span="6">{{
          ((total2.hits / total2.shots) * 100).toFixed(2) +
          "%(" +
          total2.totalPointer +
          ")"
        }}</el-col>
      </el-row>
      <el-row class="margin-bottom-15">
        <el-col :span="12"
          ><el-progress
            class="mirrorRotateLevel"
            :percentage="(total1.hits / total1.shots) * 100"
            :show-text="false"
            :stroke-width="6"
            :color="
              total1.hits / total1.shots > total2.hits / total2.shots
                ? color1
                : loseColor
            "
          ></el-progress
        ></el-col>
        <el-col :span="12"
          ><el-progress
            :percentage="(total2.hits / total2.shots) * 100"
            :show-text="false"
            :stroke-width="6"
            :color="
              total2.hits / total2.shots > total1.hits / total1.shots
                ? color2
                : loseColor
            "
          ></el-progress
        ></el-col>
      </el-row>

      <!-- 三分 -->
      <el-row type="flex" class="row-bg best-row" justify="space-between">
        <el-col :span="2">{{ total1.threeHits }}</el-col>
        <el-col :span="4">三分</el-col>
        <el-col :span="2">{{ total2.threeHits }}</el-col>
      </el-row>
      <el-row class="margin-bottom-15">
        <el-col :span="12"
          ><el-progress
            class="mirrorRotateLevel"
            :percentage="(total1.threeHits / 30) * 100"
            :show-text="false"
            :stroke-width="6"
            :color="total1.threeHits > total2.threeHits ? color1 : loseColor"
          ></el-progress
        ></el-col>
        <el-col :span="12"
          ><el-progress
            :percentage="(total2.threeHits / 30) * 100"
            :show-text="false"
            :stroke-width="6"
            :color="total2.threeHits > total1.threeHits ? color2 : loseColor"
          ></el-progress
        ></el-col>
      </el-row>
      <!-- 抢断 -->
      <el-row type="flex" class="row-bg best-row" justify="space-between">
        <el-col :span="2">{{ total1.steals }}</el-col>
        <el-col :span="4">抢断</el-col>
        <el-col :span="2">{{ total2.steals }}</el-col>
      </el-row>
      <el-row class="margin-bottom-15">
        <el-col :span="12"
          ><el-progress
            class="mirrorRotateLevel"
            :percentage="(total1.steals / 50) * 100"
            :show-text="false"
            :stroke-width="6"
            :color="total1.steals > total2.steals ? color1 : loseColor"
          ></el-progress
        ></el-col>
        <el-col :span="12"
          ><el-progress
            :percentage="(total2.steals / 50) * 100"
            :show-text="false"
            :stroke-width="6"
            :color="total2.steals > total1.steals ? color2 : loseColor"
          ></el-progress
        ></el-col>
      </el-row>

      <!-- 盖帽 -->
      <el-row type="flex" class="row-bg best-row" justify="space-between">
        <el-col :span="2">{{ total1.blocks }}</el-col>
        <el-col :span="4">盖帽</el-col>
        <el-col :span="2">{{ total2.blocks }}</el-col>
      </el-row>
      <el-row class="margin-bottom-15">
        <el-col :span="12"
          ><el-progress
            class="mirrorRotateLevel"
            :percentage="(total1.blocks / 30) * 100"
            :show-text="false"
            :stroke-width="6"
            :color="total1.blocks > total2.blocks ? color1 : loseColor"
          ></el-progress
        ></el-col>
        <el-col :span="12"
          ><el-progress
            :percentage="(total2.blocks / 30) * 100"
            :show-text="false"
            :stroke-width="6"
            :color="total2.blocks > total1.blocks ? color2 : loseColor"
          ></el-progress
        ></el-col>
      </el-row>

      <!-- 失误 -->
      <el-row type="flex" class="row-bg best-row" justify="space-between">
        <el-col :span="2">{{ total1.turnovers }}</el-col>
        <el-col :span="4">失误</el-col>
        <el-col :span="2">{{ total2.turnovers }}</el-col>
      </el-row>
      <el-row class="margin-bottom-15">
        <el-col :span="12"
          ><el-progress
            class="mirrorRotateLevel"
            :percentage="(total1.turnovers / 60) * 100"
            :show-text="false"
            :stroke-width="6"
            :color="total1.turnovers > total2.turnovers ? color1 : loseColor"
          ></el-progress
        ></el-col>
        <el-col :span="12"
          ><el-progress
            :percentage="(total2.turnovers / 60) * 100"
            :show-text="false"
            :stroke-width="6"
            :color="total2.turnovers > total1.turnovers ? color2 : loseColor"
          ></el-progress
        ></el-col>
      </el-row>

      <!-- 犯规 -->
      <el-row type="flex" class="row-bg best-row" justify="space-between">
        <el-col :span="2">{{ total1.fouls }}</el-col>
        <el-col :span="4">犯规</el-col>
        <el-col :span="2">{{ total2.fouls }}</el-col>
      </el-row>
      <el-row class="margin-bottom-15">
        <el-col :span="12"
          ><el-progress
            class="mirrorRotateLevel"
            :percentage="(total1.fouls / 30) * 100"
            :show-text="false"
            :stroke-width="6"
            :color="total1.fouls > total2.fouls ? color1 : loseColor"
          ></el-progress
        ></el-col>
        <el-col :span="12"
          ><el-progress
            :percentage="(total2.fouls / 30) * 100"
            :show-text="false"
            :stroke-width="6"
            :color="total2.fouls > total1.fouls ? color2 : loseColor"
          ></el-progress
        ></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  props: ['gameDatas'],
  data () {
    return {
      currentGameDatas: [],
      dates: [],
      currentDate: null,
      team1: { team: '', totalScore: 0, data: [], maxScorePlayer: null, maxReboundPlayer: null, maxAssistPlayer: null, maxStealPlayer: null, maxBlockPlayer: null, maxThreePointerPlayer: null },
      team2: { team: '', totalScore: 0, data: [], maxScorePlayer: null, maxReboundPlayer: null, maxAssistPlayer: null, maxStealPlayer: null, maxBlockPlayer: null, maxThreePointerPlayer: null },
      total1: null,
      total2: null,
      color1: '#409eff',
      color2: '#ff0000',
      loseColor: '#C3C3C4'
    }
  },
  methods: {
    headStyle (e) {
      if (e.columnIndex === 0) {
        if (e.column.label === this.team1.team) {
          return 'background: #fafafa; border-bottom: 2px solid #409eff'
        } else {
          return 'background: #fafafa; border-bottom: 2px solid #ff0000'
        }
      } else {
        return 'background: #fafafa'
      }
    },
    getTotalData (datas, total) {
      datas.forEach((item) => { total.score += item.score })
      datas.forEach((item) => { total.shots += item.shots })
      datas.forEach((item) => { total.hits += item.hits })
      // datas.forEach((item) => { total.threeShots += item.threeShots })
      datas.forEach((item) => { total.threeHits += item.threeHits })
      datas.forEach((item) => { total.rebounds += item.rebounds })
      datas.forEach((item) => { total.assists += item.assists })
      datas.forEach((item) => { total.steals += item.steals })
      datas.forEach((item) => { total.fouls += item.fouls })
      datas.forEach((item) => { total.blocks += item.blocks })
      datas.forEach((item) => { total.turnovers += item.turnovers })
      total.totalPointer = total.hits + '/' + total.shots
      // total.threePointer = total.threeHits + '/' + total.threeShots
      datas.push(total)
    }
  },
  watch: {
    gameDatas (newDatas, oldDates) {
      if (this.gameDatas) {
        this.dates.push(newDatas[newDatas.length - 1].date)

        if (this.currentDate === null && this.dates.length > 0) {
          this.currentDate = this.dates[0]
        }
      }
    },
    currentDate (newDate, oldDate) {
      this.gameDatas.forEach(item => {
        if (item.date === newDate) {
          this.currentGameDatas = item.gameData
          var map = {}
          var dest = []
          for (var i = 0; i < this.currentGameDatas.length; i++) {
            var data = this.currentGameDatas[i]
            if (!map[data.team]) {
              dest.push({
                team: data.team, // 队伍
                totalScore: data.score, // 总分
                data: [data] // 数据
              })
              map[data.team] = data
            } else {
              for (var j = 0; j < dest.length; j++) {
                var dj = dest[j]
                if (dj.team === data.team) {
                  dj.totalScore += data.score // 总分
                  dj.data.push(data)
                  break
                }
              }
            }
          }

          this.team1 = dest[0]
          this.team2 = dest[1]
          var temp1 = this.team1.data.concat()
          var temp2 = this.team2.data.concat()
          // 本场最高得分
          temp1.sort((a, b) => b.score - a.score)
          temp2.sort((a, b) => b.score - a.score)
          this.team1.maxScorePlayer = temp1[0]
          this.team2.maxScorePlayer = temp2[0]
          // 篮板
          temp1.sort((a, b) => b.rebounds - a.rebounds)
          temp2.sort((a, b) => b.rebounds - a.rebounds)
          this.team1.maxReboundPlayer = temp1[0]
          this.team2.maxReboundPlayer = temp2[0]
          // 助攻
          temp1.sort((a, b) => b.assists - a.assists)
          temp2.sort((a, b) => b.assists - a.assists)
          this.team1.maxAssistPlayer = temp1[0]
          this.team2.maxAssistPlayer = temp2[0]
          // 抢断
          temp1.sort((a, b) => b.steals - a.steals)
          temp2.sort((a, b) => b.steals - a.steals)
          this.team1.maxStealPlayer = temp1[0]
          this.team2.maxStealPlayer = temp2[0]
          // 盖帽
          temp1.sort((a, b) => b.blocks - a.blocks)
          temp2.sort((a, b) => b.blocks - a.blocks)
          this.team1.maxBlockPlayer = temp1[0]
          this.team2.maxBlockPlayer = temp2[0]
          // 三分
          temp1.sort((a, b) => b.threeHits - a.threeHits)
          temp2.sort((a, b) => b.threeHits - a.threeHits)
          this.team1.maxThreePointerPlayer = temp1[0]
          this.team2.maxThreePointerPlayer = temp2[0]
          // 总计
          this.total1 = { player: '总计', score: 0, shots: 0, hits: 0, totalPointer: '', threeShots: 0, threeHits: 0, threePointer: '', rebounds: 0, assists: 0, steals: 0, fouls: 0, blocks: 0, turnovers: 0, efg: '-' }
          this.total2 = { player: '总计', score: 0, shots: 0, hits: 0, totalPointer: '', threeShots: 0, threeHits: 0, threePointer: '', rebounds: 0, assists: 0, steals: 0, fouls: 0, blocks: 0, turnovers: 0, efg: '-' }
          this.getTotalData(this.team1.data, this.total1)
          this.getTotalData(this.team2.data, this.total2)

          // 命中率
          var hitRate1 = { player: '命中率', score: '-', shots: '-', hits: '-', totalPointer: '', threeShots: '-', threeHits: '-', threePointer: '-', rebounds: '-', assists: '-', steals: '-', fouls: '-', blocks: '-', turnovers: '-', efg: '-' }
          var hitRate2 = { player: '命中率', score: '-', shots: '-', hits: '-', totalPointer: '', threeShots: '-', threeHits: '-', threePointer: '-', rebounds: '-', assists: '-', steals: '-', fouls: '-', blocks: '-', turnovers: '-', efg: '-' }
          hitRate1.totalPointer = (this.total1.hits / this.total1.shots * 100).toFixed(1) + '%'
          // hitRate1.threePointer = (this.total1.threeHits / this.total1.threeShots * 100).toFixed(1) + '%'
          hitRate2.totalPointer = (this.total2.hits / this.total2.shots * 100).toFixed(1) + '%'
          // hitRate2.threePointer = (this.total2.threeHits / this.total2.threeShots * 100).toFixed(1) + '%'
          this.team1.data.push(hitRate1)
          this.team2.data.push(hitRate2)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  font-size: 16px;
  font-weight: bold;
  border-left: 5px solid #409eff;
  text-align: left;
  padding-left: 10px;
  margin-bottom: 10px;
}
.team {
  font-size: 16px;
  font-weight: bold;
}
.score {
  font-size: 32px;
}
.date {
  font-size: 12px;
}
.win {
  color: #ff0000;
}
.lose {
  color: #808080;
}
.card {
  background: #fff;
  border-bottom: 10px solid #fafafa;
  padding: 10px 8px 0 8px;
}
.best-row {
  margin: 8px 5px;
  font-size: 12px;
}
.left-player {
  text-align: left;
  margin-left: 30px;
}
.right-player {
  text-align: right;
  margin-right: 30px;
}
.expender-btn {
  width: 100%;
  color: #909399;
}
.team1 {
  background: #409eff;
  color: #fff;
  margin-left: -15px;
  padding: 5px 0;
  border-radius: 0 13px 13px 0;
}
.team2 {
  background: #ff0000;
  color: #fff;
  margin-right: -15px;
  padding: 5px 0;
  border-radius: 13px 0 0 13px;
}
.mirrorRotateLevel {
  transform: rotateY(180deg); /* 水平镜像翻转 */
}
.margin-bottom-15 {
  margin-bottom: 15px;
}
</style>
